<style type="text/css">
.category{position: absolute; z-index:999999999; left: 175px; width: 200px; top: -1px; background: #FFF; border: 1px solid #DDDDDD; box-shadow: 5px 5px 6px #C2C2C2;}
.category a{margin-left:10px; color:#333;}
.category_span{margin: 1px 0 0 -1px; color: #CCC; border-top: 0px solid #CCC; background-color: #FFF; padding: 0px 30px 0px 8px; white-space: nowrap; position:absolute;}
</style>
<div class="cate-main">
    <ul class="cates" id="categories">
    <?php
    $num = count($channel);
    foreach($channel as $k => $v) {
		$leaf = '';
		if($v['children'] == '') $leaf = 'class="leaf" ';
        if($v['depth'] == $channel_depth) {
            if(isset($channel[$k-1]['depth']) && $channel[$k-1]['depth'] == ($channel_depth + 1)) {
                echo '</div></li>';
            }
            if(isset($channel[$k+1]['depth']) && $channel[$k+1]['depth'] == ($channel_depth + 1)) {
                echo '<li '.$leaf.'style="position: relative;"><a href="'.$v['url'].'">'.$v['title']
                    .'</a><div class="category" style="display:none;"><span class="category_span">'.$v['title'].'</span><a>　</a>';
            } else {
                echo '<li '.$leaf.'><a href="'.$v['url'].'">'.$v['title'].'</a></li>';
            }
        } elseif($v['depth'] == ($channel_depth + 1)) {
            echo '<a href="'.$v['url'].'">'.$v['title'].'</a>';
        }
    }
    ?>
        <!--<li class="current" style="position: relative;"><a
            href="http://www.alibaba.com/Agriculture_p1">Agriculture</a>
            <div class="category">
                <span class="category_span">Fruit</span>
                <a href="#">Drop Down Menu</a> <a href="#">jQuery Plugin</a> <a
                    href="#">Ajax Navigation</a>
            </div>
        </li>-->
        <li class="veiw-all leaf"><a href="<?php echo $this->config->base_url('channel'); ?>">所有类别</a></li>
    </ul>

</div>
<script type="text/javascript">
var closetimer_mune = 0;
var ddmenuitem_mune = 0;

function menu_open() {
	menu_canceltimer();	menu_close();
	ddmenuitem_mune = $(this).find('div').eq(0).css('display', 'block');
	$(this).addClass("current");
}

function menu_close() {	
	if(ddmenuitem_mune) ddmenuitem_mune.css('display', 'none');
	$('#categories > li').removeClass("current");
}

function menu_timer()
{	closetimer_mune = window.setTimeout(menu_close, timeout);}

function menu_canceltimer()
{	if(closetimer_mune)
	{	window.clearTimeout(closetimer_mune);
		closetimer_mune = null;}}

$(document).ready(function()
{	$('#categories > li').bind('mouseover', menu_open);
	$('#categories > li').bind('mouseout',  menu_timer);});

</script>